<template>
  <!-- 选择仓库 -->
    <el-dialog title="选择库存" :visible.sync="openSelectOpropertyWarehouse" width="1200px" append-to-body :destroy-on-close="true" :before-close="beforeClose">
      <el-form ref="form" @submit.native.prevent :model="formQuery" :inline="true" v-show="showSearch" label-width="120px" :label-position="labelPosition">
        <el-form-item label="条码" prop="sptm">
          <el-input
            v-model="formQuery.sptm"
            placeholder="请输入用户条码"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
        <el-form-item label="仓库" prop="spckmc">
          <el-select
            v-model="formQuery.spckmc"
            placeholder="请选择仓库"
            clearable
            filterable
            @keyup.enter.native="enterClick"
            :loading="selectWarehouse3Loading"
            @change="changeSelectWarehouse3"
          >
            <el-option
                v-for="item in selectWarehouse3List"
                :key="item.spckid"
                :label="item.spckmc"
                :value="item.spckmc"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入仓时间">
          <el-date-picker
            v-model="formQuery.ssrqid"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            @change="handleQuery"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="批号" prop="spbh">
          <el-input
            v-model="formQuery.spbh"
            placeholder="请输入批号"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
        <el-form-item label="柜号" prop="spgh">
          <el-input
            v-model="formQuery.spgh"
            placeholder="请输入柜号"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>
       
        <el-form-item label="物品规格" prop="spzs">
          <el-input
            v-model="formQuery.spzs"
            placeholder="请输入物品规格"
            clearable
            @keyup.enter.native="enterClick"
          />
        </el-form-item>   
        <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">搜 索</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain size="mini" @click="handleExport" :disabled="selection.length === 0">导出勾选数据</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="warehouseList"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        @row-click="handleRowClick"
        :row-class-name="tableRowClassName"
      >
        <af-table-column type="selection" width="50" />
        <af-table-column label="仓库条码" prop="sptmc" fixed="left" />
        <af-table-column label="条码" prop="sptm" />
        <af-table-column label="件数" prop="spjs2" />
        <af-table-column label="数量" prop="spsl2" />
        <af-table-column label="仓库" prop="spckmc" />
        <af-table-column label="仓位" prop="ckcw" />
        <af-table-column label="柜号" prop="spgh" />
        <af-table-column label="批号" prop="spbh" />
        <af-table-column label="所有者" prop="spkhmc" />
        <af-table-column label="入仓日期" prop="ssrqid" />
        <af-table-column label="物品状态" prop="spdm" />
        <af-table-column label="所在系统" prop="khlx" />
        <af-table-column label="物品规格" prop="spzs" />
        <af-table-column label="品牌" prop="spcd" />
        <af-table-column label="纱支" prop="wpggA" />
        <af-table-column label="工艺" prop="wpggB" />
        <af-table-column label="工序" prop="wpggC" />
        <af-table-column label="用途" prop="wpggD" />
        <af-table-column label="产地" prop="wpggE" />
        <af-table-column label="漂染性" prop="wpggF" />
        <af-table-column label="生产日期" prop="wpggG" />
        <af-table-column label="颜色" prop="wpggH" />
        <af-table-column label="备注" prop="itbz"  width="150" :show-overflow-tooltip="true"/>
        <af-table-column label="估价单价" prop="spdj" />
        <af-table-column label="质押件数" prop="spjsz" />
        <af-table-column label="质押吨数" prop="spslz" />
      </el-table>
       <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSelect">多选录入</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { warehousePropertyOList } from "@/api/storage/commonGoods/warehouseProperty";
import { selectWarehouse3 } from "@/api/storage/warehouse";

export default {
  name: "WarehousePropertySelect",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
       //加载列表
      loading: true,
      // 对齐方式
      labelPosition:"right",
      //弹窗状态
      openSelectOpropertyWarehouse: false,
      //仓库加载
      selectWarehouse3Loading: true,
      // 查询参数
      formQuery: {
        ckcw: "",
        inp: [],
        khmcid: "",
        spbh: "",
        spcd: "",
        spckmc: "",
        spgh: "",
        spkhmc: "",
        spkhmcid: "",
        spmc: "",
        sptm: "",
        spzs: "",
        ssrqid: ""
      },
      //仓库列表
      selectWarehouse3List:[],
      //勾选数据
      selection:[],
       //excel导出
       exportList: [],
      //选择仓库
      selectWarehouseList: [],
      //行数据
      warehouseList:[],
      //页数
      pageSize: 10,
      //页码
      pageNum:1,
      // 总条数
      total: 0,
    };
  },
  methods: {
    /**获取仓库信息 */
    getList() {
      this.loading=true
      warehousePropertyOList(this.formQuery, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
        this.warehouseList = response.rows;
        this.total = response.total
        this.loading=false
      });
    },
    /**获取仓库 */
    warehouse3select() {
      this.selectWarehouse3Loading = true
       selectWarehouse3({}).then(response => {
        this.selectWarehouse3List = response.data;
        this.selectWarehouse3Loading = false
      });
    },
    /**仓库搜索 */
    handleQuery() {
        this.getList()
    },
    /** 选择录入*/
    handleSelect() {
      this.changeSelectOpropertyWarehouse()
      this.$emit('propertyWarehouseSelected', this.selection)
    },
    changeSelectWarehouse3() {
      this.getList()
    },
     // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection
    },
    /**点击列表行触发 */
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /**选中行 */
    tableRowClassName({row, rowIndex}) {
      if(this.selection.some((item) => item === row)) {
        return "selected-bg-color"
      }
      return ""
    },
     /** 导出勾选数据*/
    handleExport() {
      if (this.selection.length > 0) {
        let option = {}
        option.fileName = '货权转移勾选数据'
        option.datas = [
          {
            sheetData: this.selection,//数据
            sheetName: 'sheet',
            //表头数据对应的sheetData数据
            sheetFilter: ['sptm', 'sptmc', 'spkhmc', 'spckmc', 'ckcw', 'spjs2', 'spjsl', 'spsl2', 'spjsf', 
            'spzs', 'spcd', 'spgh', 'spbh', 'wpggA', 'wpggB', 'wpggC', 'wpggD', 'wpggE', 'wpggF', 'wpggG',
            'wpggH', 'ssrqid', 'spdj', 'spjsz', 'spslz'],
            sheetHeader: [
              //表头数据
              '用户条码', '仓库条码', '所有者', '仓库', '仓位', '剩余件数','单重(KG)', '剩余重量(吨)',
              '冻结件数', '冻结重量(吨)','物品规格','品牌','柜号','批号','纱支','工艺','工序','用途',
              '产地','漂染性','生产日期','颜色','入仓日期','估价单价','质押件数','质押吨数'],
          }
        ]

        let excel = ExportJsonExcel(option)
        excel.saveExcel()
      } else {
        this.$modal.msgError('请勾选数据');
      }
    },
      /**enter键触发 */
    enterClick(e) {
      this.getList()
    },
    /**改变窗口状态 */
    changeSelectOpropertyWarehouse() {
      this.openSelectOpropertyWarehouse = !this.openSelectOpropertyWarehouse;
    },
    /**关闭弹窗 */
    beforeClose(done) {
      this.close()
      done()
    },
    /**关闭弹窗 */
    close() {
      this.changeSelectOpropertyWarehouse()
    },
    /**打开弹窗 */
    open(inp, id, spckmc) {
      this.formQuery.spkhmcid = id
      this.formQuery.spckmc = spckmc
      this.formQuery.inp = inp
      this.changeSelectOpropertyWarehouse()
      this.warehouse3select()
      this.getList()
    }
  }
};
</script>
